<template>
    <div class="release page">
        <div class="pageHead">
            <i class="cubeic-back" @click="back()"></i>
            <div class="title"></div>
            <div class="btn" @click="commit">发布</div>
        </div>
        <div class="con">
            <div class="form">
                <textarea placeholder="说出你的想法...200字以内" autofocus :maxlength="200" v-model="content"
                          @input="checkLength"></textarea>
                <div class="imgBox">
                    <imageUpload class="img" v-model="imgList"></imageUpload>
                </div>
                <div class="selectBox">
                    <div class="cell"  v-if="shopValue">
                        <img src="./image/shop.png">
                        <div class="selectCon">{{shopValue}}</div>
<!--                        <i class="cubeic-arrow"></i>-->
                    </div>
                    <div class="cell"  v-if="goodsValue">
                        <img src="./image/goods.png">
                        <div class="selectCon">{{goodsValue}}</div>
<!--                        <i class="cubeic-arrow"></i>-->
                    </div>
                </div>
                <div class="check">
                    <div class="cell" @click="showShop">
                        <img src="./image/selectShop.png" alt="">
                        <div>选择店铺</div>
                    </div>
                    <div class="cell" @click="showGoods">
                        <img src="./image/selectGoods.png" alt="">
                        <div>选择产品</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {getShopList, getGoodsList, setMaterial,edit} from '@/api/material'
    import imageUpload from '@/components/update/image-upload'
    import {showError} from "../../toast";
    import {showAlert} from "../../dialog";

    export default {
        name: "release",
        components: {imageUpload},
        data() {
            return {
                content: '',
                imgList: '',
                shopList: [],
                shopValue: '',
                shopId: '',
                goodsList: [],
                goodsValue: '',
                goodsId: '',
                formData:{}
            }
        },
        methods: {
            showShop() {
                if (this.$route.query.type){
                    return
                }
                if (!this.shopPicker) {
                    this.shopPicker = this.$createPicker({
                        title: '选择店铺',
                        data: [this.shopList],
                        onSelect: this.selectShop
                    })
                }
                this.shopPicker.show()
            },
            selectShop(selectedVal, selectedIndex, selectedText) {
                this.shopValue = selectedText[0]
                this.shopId = selectedVal[0]
                this.goodsList = []
                this.goodsPicker = ''
                this.goodsValue = ''
                getGoodsList(selectedVal).then(res => {
                    this.goodsList = res.data.map(item => {
                        this.$set(item, 'text', item.name)
                        this.$set(item, 'value', item.id)
                        return item
                    })
                })
            },
            showGoods() {
                if (this.$route.query.type){
                    return
                }
                if (!this.shopValue) {
                    showError('请先选择店铺!')
                    return
                }
                if (!this.goodsPicker) {
                    this.goodsPicker = this.$createPicker({
                        title: '选择商品',
                        data: [this.goodsList],
                        onSelect: this.selectGoods
                    })
                }
                this.goodsPicker.show()
            },
            selectGoods(selectedVal, selectedIndex, selectedText) {
                this.goodsValue = selectedText[0]
                this.goodsId = selectedVal[0]
            },
            back() {
                this.$router.go(-1)
            },
            commit() {
                if (!this.content) {
                    showError('请填写内容！')
                    return
                }
                if (!this.imgList) {
                    showError('请发表图片！')
                    return
                }
                if (!this.shopValue) {
                    showError('请选择店铺！')
                    return
                }
                if (!this.goodsValue) {
                    showError('请选择商品！')
                    return
                }
                if (this.$route.query.type){
                    this.formData.content = this.content
                    this.formData.img = this.imgList
                    this.formData.shopId = this.shopId
                    this.formData.goodsId = this.goodsId
                    this.formData.goodsName = this.goodsValue
                    edit(this.formData).then(res=>{
                        showAlert('修改成功！请等待审核')
                        this.$router.push({
                            path: '/material/history?type=1'
                        })
                    })
                }else {
                    setMaterial(this.shopId, this.goodsId, this.goodsValue, this.content, this.imgList).then(res => {
                        showAlert('发布成功！请等待审核')
                        this.$router.push({
                            path: '/material'
                        })
                    })
                }


            },
            checkLength() {
                if (this.content.length > 200) {
                    this.content = this.content.substring(0, 200)
                    showError('超过字数限制!')
                }
            }
        },
        activated() {
            if (this.$route.query.type){
                this.formData = this.$route.query
                this.content = this.formData.content
                this.shopValue = this.formData.shopEntity.name
                this.goodsValue = this.formData.goodsName
                this.shopId = this.formData.shopId
                this.goodsId = this.formData.goodsId
                this.imgList = this.formData.img
            }
            getShopList().then(res => {
                this.shopList = res.data.map(item => {
                    this.$set(item, 'text', item.name)
                    this.$set(item, 'value', item.id)
                    return item
                })
                this.shopList.unshift({text: '社集优选自营店', value: 0})
            })
        }
    }
</script>

<style scoped lang="stylus">
    .release
        background-color: #fff

        .pageHead
            display flex
            justify-content space-between
            height 44px
            font-size 18.5px
            color #000
            background-color: #fff
            align-items center
            padding 0 15px

            .btn
                color #fff
                line-height 29px
                text-align center
                border-radius 2.5px
                width 68px
                height 29px
                background-color: #00d6c0

        .con
            padding 10px 15px

            .form
                background-color: #fff
                padding-bottom 40px

                textarea
                    min-height 90px
                    width calc(100% - 30px)
                    outline none
                    border none
                    padding 15px
                    resize: none;
                    font-size 20px

                .selectBox
                    margin-top 40px
                    padding 0 15px
                    height 90px
                    width calc(100% - 30px)

                    .cell
                        display flex
                        justify-content space-between
                        align-items center
                        font-size 16px
                        padding 15px 0

                        img
                            width: 16px
                            height: 16px

                        .selectCon
                            color #333737
                            margin 0 15px
                            flex 1
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            word-break: break-all;

                        i
                            color #b6b9bb

                    > :nth-child(2)
                        border-bottom 1px solid #f4f3f3
                .check
                    display flex
                    justify-content space-around
                    color #333
                    font-size 15px
                    margin-top 43px
                    img
                        margin-bottom 9px
                        height 49px
                        width 49px
                    .cell
                        display flex
                        flex-direction column
                        justify-content center
                        align-items center



</style>
